<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="900px">
    <div class="form-container">
      <div class="section">
        <h3>基础资料</h3>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
        >
          <el-form-item label="客户订单编号" prop="customerOrderNumber">
            <el-input 
              v-model="formData.customerOrderNumber" 
              placeholder="请输入" 
              clearable
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input 
              v-model="formData.remark" 
              type="textarea"
              :rows="2"
              placeholder="请输入" 
            />
          </el-form-item>
        </el-form>
      </div>

      <div class="section">
        <h3>产品列表</h3>
        <el-table :data="formData.products" border>
          <el-table-column label="序号" type="index" width="70" align="center" />
          <el-table-column label="产品编号" prop="productCode" min-width="180">
            <template #default="{ row }">
              {{ row.productCode || 'CPFL2024081600...' }}
            </template>
          </el-table-column>
          <el-table-column label="产品名称" prop="productName" min-width="120" />
          <el-table-column label="产品规格" prop="specification" min-width="120" />
          <el-table-column label="产品属性" prop="attribute" min-width="120" />
          <el-table-column label="产品备注" prop="productRemark" min-width="120" />
          <el-table-column label="销售备注" min-width="150">
            <template #default="{ row, $index }">
              <el-input
                v-model="row.salesRemark"
                placeholder="请输入"
                @change="handleSalesRemarkChange($index, row.salesRemark)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button 
        type="primary" 
        @click="submitForm"
        :disabled="formLoading"
      >
        保存
      </el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 对话框显示控制
const dialogVisible = ref(false)
const dialogTitle = ref('编辑')
const formLoading = ref(false)
const formRef = ref()

// 表单数据结构
interface ProductItem {
  productCode?: string
  productName?: string
  specification?: string
  attribute?: string
  productRemark?: string
  salesRemark?: string
}

interface FormData {
  customerOrderNumber?: string
  remark?: string
  products: ProductItem[]
}

const formData = reactive<FormData>({
  customerOrderNumber: '',
  remark: '',
  products: [
    {
      productName: '序列号测试',
      salesRemark: ''
    }
  ]
})

// 表单验证规则
const formRules = reactive({
  customerOrderNumber: [
    { required: true, message: '客户订单编号不能为空', trigger: 'blur' }
  ]
})

/** 打开弹窗 */
const open = () => {
  dialogVisible.value = true
  // 重置表单数据
  resetForm()
  // 实际开发中这里需要加载数据
  // loadData()
}

/** 重置表单 */
const resetForm = () => {
  formData.customerOrderNumber = ''
  formData.remark = ''
  formData.products = [{
    productName: '序列号测试',
    salesRemark: ''
  }]
}

/** 处理销售备注变更 */
const handleSalesRemarkChange = (index: number, value: string) => {
  console.log(`产品 ${index + 1} 销售备注变更:`, value)
  // 这里可以添加保存逻辑或其它处理
}

/** 提交表单 */
const submitForm = async () => {
  try {
    // 验证表单
    await formRef.value.validate()
    
    formLoading.value = true
    // 这里添加保存逻辑
    console.log('提交数据:', formData)
    
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('保存成功')
    dialogVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    formLoading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped>
.section {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

</style>